<template>
    <div class="headers">
        <!-- 导航头部 -->
        <el-menu 
            active-text-color="green"
            default-active="/lanmu/parenting" 
            class="el-menu-demo" 
            mode="horizontal" 
            @select="handleSelect"
            >
            <el-menu-item index="1">
                <router-link to="/Home">首页</router-link>
            </el-menu-item>
            <el-menu-item index="/lanmu/drama">
                <router-link to="/lanmu/drama">戏剧</router-link>
            </el-menu-item>
            <el-menu-item index="/lanmu/sport">
                <router-link to="/lanmu/sport">体育</router-link>
            </el-menu-item>
            <el-menu-item index="/lanmu/parenting">
                <router-link to="/lanmu/parenting">亲子</router-link>
            </el-menu-item>
            <el-menu-item index="/lanmu/rock">
                <router-link to="/lanmu/rock">摇滚</router-link>
            </el-menu-item>
            <el-menu-item index="/lanmu/kuchipudi">
                <router-link to="/lanmu/kuchipudi">舞蹈古典</router-link>
            </el-menu-item>
            <!-- <el-menu-item index="/lanmu/travelstar">
                <router-link to="/lanmu/travelstar">手机购票</router-link>
            </el-menu-item> -->
        </el-menu>

        <span>精彩专题</span>

        <div>
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
export default {
    name: "headers-nav",
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>
<style scoped>
    .headers{
        padding: 0px 40px;
    }
    .el-menu-demo{
        width: 80%;
        font-weight: bold;
        float: left;
        border: none;
    }
    span{
        float: right;
        margin-top: 15px;
        font-size: 15px;
    }
    .el-menu-item a{
        display: inline-block;
        width: 60px;
        text-decoration: none;
    }
</style>